import React, { Component } from 'react'
import './style.scss'
import { node, func, string, oneOfType, bool } from 'prop-types'
import throttle from 'lodash/throttle'

class TopNav extends Component {
  // state = {
  //   stickyTop: false
  // }
  // stickyPage = throttle(() => {
  //   this.setState({
  //     stickyTop: document.documentElement.scrollTop >= 30
  //   })
  // }, 100)

  // componentDidMount() {
  //   // 它受到css中的 overflow影响，如果设置了它，可能事件不能被触发
  //   if (this.props.sticky) {
  //     window.addEventListener('scroll', this.stickyPage)
  //   }
  // }
  // componentWillUnmount() {
  //   if (this.props.sticky) {
  //     window.removeEventListener('scroll', this.stickyPage)
  //   }
  // }

  render() {
    // const { stickyTop } = this.state
    const { left, onLeft, right, onRight, title, sticky } = this.props
    return (
      // <div className={'top-nav-box ' + (stickyTop ? 'top-nav-active-top' : '')}>
      <div className={'top-nav-box ' + (sticky ? 'top-nav-active-top' : '')}>
        <div onClick={onLeft}>{left}</div>
        <div>{title}</div>
        <div onClick={onRight}>{right}</div>
      </div>
    )
  }
}

TopNav.propTypes = {
  left: oneOfType([string, node]),
  onLeft: func,
  right: oneOfType([string, node]),
  onRight: func,
  title: string.isRequired,
  sticky: bool
}

TopNav.defaultProps = {
  left: '',
  onLeft: () => {},
  right: '',
  onRight: () => {},
  sticky: false
}

export default TopNav
